import orderApi from '@/api/orderApi'
import type { IAction, IModalProps } from '@/types/modal'
import type { DictItem } from '@/types/orderType'
import { message } from '@/utils/AntdGlobal'
import { Col, DatePicker, Form, Input, Modal, Row, Select } from 'antd'
import { useEffect, useImperativeHandle, useState } from 'react'

const CreateOrder = (props: IModalProps) => {
  const [visible, setVisible] = useState(false)
  const [form] = Form.useForm()
  const [cityList, setCityList] = useState<DictItem[]>([])
  const [vehicleList, setVehicleList] = useState<DictItem[]>([])
  const handleOk = async () => {
    await form.validateFields()
    const params = form.getFieldsValue()
    await orderApi.createOrder(params)
    message.success('创建成功')
    props.update()
    handleCancel()
  }
  useImperativeHandle(props.mRef, () => {
    return {
      open
    }
  })
  const open = (type: IAction) => {
    setVisible(true)
  }
  const handleCancel = () => {
    setVisible(false)
    form.resetFields()
  }
  const getCityList = async () => {
    const res = await orderApi.getCityList()
    setCityList(res)
  }
  const getVehicleList = async () => {
    const res = await orderApi.getVehicleList()
    setVehicleList(res)
  }
  useEffect(() => {
    getCityList()
    getVehicleList()
  }, [])
  return (
    <Modal
      okText='确定'
      cancelText='取消'
      onOk={handleOk}
      onCancel={handleCancel}
      open={visible}
      title='创建订单'
      width={800}
    >
      <Form form={form} layout='horizontal' labelCol={{ span: 8 }} wrapperCol={{ span: 16 }}>
        <Row gutter={16}>
          <Col span='12'>
            <Form.Item label='城市名称' name='cityName' rules={[{ required: true, message: '请选择城市' }]}>
              <Select
                options={cityList}
                fieldNames={{ label: 'name', value: 'name' }}
                placeholder='清选择城市'
              ></Select>
            </Form.Item>
          </Col>
          <Col span='12'>
            <Form.Item label='车型' name='vehicleName' rules={[{ required: true, message: '请选择车型' }]}>
              <Select
                options={vehicleList}
                fieldNames={{ label: 'name', value: 'name' }}
                placeholder='请选择车型'
              ></Select>
            </Form.Item>
          </Col>
          <Col span='12'>
            <Form.Item label='用户名称' name='userName' rules={[{ required: true, message: '请输入用户名称' }]}>
              <Input placeholder='请输入用户名称'></Input>
            </Form.Item>
          </Col>
          <Col span='12'>
            <Form.Item label='手机号' name='mobile'>
              <Input placeholder='请输入手机号'></Input>
            </Form.Item>
          </Col>
          <Col span='12'>
            <Form.Item label='起始地址' name='startAddress'>
              <Input placeholder='请输入起始地址'></Input>
            </Form.Item>
          </Col>
          <Col span='12'>
            <Form.Item label='结束地址' name='endAddress'>
              <Input placeholder='请输入结束地址'></Input>
            </Form.Item>
          </Col>
          <Col span='12'>
            <Form.Item label='下单金额' name='orderAmount'>
              <Input placeholder='请输入下单金额'></Input>
            </Form.Item>
          </Col>
          <Col span='12'>
            <Form.Item label='支付金额' name='userPayAmount'>
              <Input placeholder='请输入支付金额'></Input>
            </Form.Item>
          </Col>
          <Col span='12'>
            <Form.Item label='司机名称' name='driverName'>
              <Input placeholder='请输入司机名称'></Input>
            </Form.Item>
          </Col>
          <Col span='12'>
            <Form.Item label='司机金额' name='driverAmount'>
              <Input placeholder='请输入司机金额'></Input>
            </Form.Item>
          </Col>
          <Col span='12'>
            <Form.Item label='支付方式' name='payType'>
              <Select
                placeholder='请选择支付方式'
                options={[
                  { label: '微信', value: 1 },
                  { label: '支付宝', value: 2 }
                ]}
              ></Select>
            </Form.Item>
          </Col>
          <Col span='12'>
            <Form.Item label='订单状态' name='state'>
              <Select
                placeholder='请选择订单状态'
                options={[
                  { label: '进行中', value: 1 },
                  { label: '已完成', value: 2 },
                  { label: '超时', value: 3 },
                  { label: '取消', value: 4 }
                ]}
              ></Select>
            </Form.Item>
          </Col>
          <Col span='12'>
            <Form.Item label='用车时间' name='useTime'>
              <DatePicker placeholder='请选择日期' />
            </Form.Item>
          </Col>
          <Col span='12'>
            <Form.Item label='结束时间' name='endTime'>
              <DatePicker placeholder='请选择日期' />
            </Form.Item>
          </Col>
        </Row>
      </Form>
    </Modal>
  )
}

export default CreateOrder
